<template>
	<view class="mainbgc mainpadding2">
		<!-- 发布求职 -->
		<view class="strongtext">
			<view class="mainpadding_top ffffff radius flexbetween">
				<view class="strongtext minwidth">商品名称</view>
				<view class="flexright">
					<input type="text" placeholder="请输入商品名称" class="textright margin_right" v-model="dataAll.title">
				</view>
			</view>
			<view class="mainpadding_top ffffff radius flexbetween" @click="show_cp=true">
				<view class="strongtext minwidth">商品分类</view>
				<view class="flexright">
					<input type="text" placeholder="请选择商品分类" class="textright margin_right" disabled=""
						v-model="category_name">
					<view class="right_icon"></view>
				</view>
			</view>
			<view class="mainpadding_top ffffff radius flexbetween" @click="shuxing">
				<view class="strongtext minwidth">商品属性</view>
				<view class="flexright">
					<view class="textright margin_right option" v-if="shuxingshow">已选择</view>
					<input type="text" placeholder="请选择商品属性" disabled="" class="textright margin_right"
						v-if="!shuxingshow">
					<view class="right_icon"></view>
				</view>
			</view>
			<view class="mainpadding_top ffffff radius flexbetween">
				<view class="strongtext minwidth">商品规格</view>
				<view class="flexright" @click="xuanze">
					<view class="textright margin_right option" v-if="dataAll.specs!=''">已选择</view>
					<input type="text" placeholder="请选择商品规格" disabled="" class="textright margin_right"
						v-if="dataAll.specs==''">
					<view class="right_icon"></view>
				</view>
			</view>
			<view class="mainpadding_top ffffff radius flexbetween">
				<view class="strongtext">发货地</view>
				<view class="flexright">
					<uni-data-picker @change="bindPickerChange" :localdata="items" placeholder="请选择地区"
						popup-title="请选择地区" v-model="dataAll.send_area_id" class="margin_right">
						<text class="inputs1" v-if="!area.length" style="color: #999999;">请选择地区</text>
						<text class="inputs1" v-else>{{ area[0] }}/{{ area[1] }}/{{ area[2] }}</text>
					</uni-data-picker>
					<view class="right_icon"></view>
				</view>
			</view>
			<view class="mainpadding_top ffffff radius flexbetween">
				<view class="strongtext minwidth">联系人</view>
				<view class="flexright">
					<input type="text" placeholder="请输入联系人" class="textright margin_right" v-model="dataAll.lxname">
				</view>
			</view>
			<view class="mainpadding_top ffffff radius flexbetween">
				<view class="strongtext minwidth">联系电话</view>
				<view class="flexright">
					<input type="text" placeholder="请输入联系电话" class="textright margin_right" v-model="dataAll.mobile">
				</view>
			</view>
			<view class="mainpadding_top ffffff radius">
				<view class="strongtext">商品缩略图（{{dataAll.image.length}}/1）</view>
				<view class="flexleft flex_wrap">
					<!-- 图片盒子 -->
					<view class="item_image_box margin_top flexcenter" v-if="dataAll.image.length"
						v-for="(item,index) in dataAll.image" :key="item">
						<view class="item_image radius">
							<image :src="item" mode=""></image>
							<view class="deletimg" @click="delimg(index,dataAll.image)"></view>
						</view>
					</view>
					<!-- 上传图片 -->
					<view class="item_image_box margin_top flexcenter" @click="uploadImg(1,dataAll.image)"
						v-if="!dataAll.image.length">
						<view class="flexcolumn upimagebox radius">
							<view class="upimage">
								<image src="@/static/images/system/camera.png" class="radius" mode=""></image>
							</view>
							<view style="margin-top: 20rpx;">上传图片</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 商品主图-->
			<view class="mainpadding_top ffffff radius">
				<view class="strongtext">商品主图（{{dataAll.images.length}}/3）</view>
				<view class="flexleft flex_wrap">
					<!-- 图片盒子 -->
					<view class="item_image_box margin_top flexcenter" v-if="dataAll.images.length"
						v-for="(item,index) in dataAll.images" :key="item">
						<view class="item_image radius">
							<image :src="item" mode=""></image>
							<view class="deletimg" @click="delimg(index,dataAll.images)"></view>
						</view>
					</view>
					<!-- 上传图片 -->
					<view class="item_image_box margin_top flexcenter" @click="uploadImg(3,dataAll.images)"
						v-if="dataAll.images.length<3">
						<view class="flexcolumn upimagebox radius">
							<view class="upimage">
								<image src="@/static/images/system/camera.png" class="radius" mode=""></image>
							</view>
							<view style="margin-top: 20rpx;">上传图片</view>
						</view>
					</view>
				</view>
			</view>
			<view class="mainpadding_top ffffff radius">
				<view class="strongtext">上传视频（{{vadio.length}}/1）</view>
				<view class="flexleft margin_top">
					<!-- 图片盒子 -->
					<view class="item_image_box flexcenter" v-for="(item,index) in vadio" :key="index">
						<view class="item_image radius">
							<video :src="item" class="video radius"></video>
							<view class="deletimg" @click="vadio=[]"></view>
						</view>
					</view>
					<!-- 上传视频 -->
					<view class="item_image_box flexcenter" @click="upvideo" v-if="!vadio.length">
						<view class="item_image radius">
							<image src="@/static/images/system/vedio.png" class="radius " mode=""></image>
						</view>
					</view>
				</view>
			</view>
			<!-- 商品详情 -->
			<view class="mainpadding_top ffffff radius">
				<view class="strongtext">商品详情图（{{dataAll.xq_images.length}}/3）</view>
				<view class="flexleft flex_wrap">
					<!-- 图片盒子 -->
					<view class="item_image_box margin_top flexcenter" v-if="dataAll.xq_images.length"
						v-for="(item,index) in dataAll.xq_images" :key="item">
						<view class="item_image radius">
							<image :src="item" mode=""></image>
							<view class="deletimg" @click="delimg(index,dataAll.xq_images)"></view>
						</view>
					</view>
					<!-- 上传图片 -->
					<view class="item_image_box margin_top flexcenter" @click="uploadImg(3,dataAll.xq_images)"
						v-if="dataAll.xq_images.length<3">
						<view class="flexcolumn upimagebox radius">
							<view class="upimage">
								<image src="@/static/images/system/camera.png" class="radius" mode=""></image>
							</view>
							<view style="margin-top: 20rpx;">上传图片</view>
						</view>
					</view>
				</view>
			</view>
			<view class="bottombtn margin_top" @click="submit">提交</view>
		</view>
		<!-- 产品分类 -->
		<u-popup :show="show_cp" :round="10" @close="show_cp=false">
			<view class="mainpadding flexcenter">产品</view>
			<view class="flexleft">
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="leftscroll">
					<view :class="item.ischeck?'itemfocus':'itemnofocus'" v-for="item in list" :key="item.id"
						@click="changestatus(item)">
						<view :class="item.ischeck?'lablefocus':'lablenofocus'">{{item.name}}</view>
					</view>
				</scroll-view>
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="rightscroll mainpadding">
					<view v-for="item in rightlist" :key="item.id">
						<view class="titletext">{{item.name}}</view>
						<view class="flexleft flex_wrap">
							<view
								:class="ite.ischeck?'focusbgc margin_top itemlable margin_right':'nofocusbgc margin_top itemlable margin_right'"
								v-for="ite in item.childlist" :key="ite.id" @click="changesmallStatus(ite,item.id)">{{ite.name}}
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="flexbetween mainpadding">
				<view class="bottombtn margin_top" @click="sure">确定</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	import citys from "@/static/city/city.js"
	export default {
		data() {
			return {
				dataAll: {
					title: "", //商品名称
					category_id: "", //商品分类
					// 商品属性内容开始
					cd: "", //产地
					zsl: "", //自重量（KG）
					cz: "", //材质
					jg: "", //结构
					cweigh: "", //称重
					cs: "", //成色
					min_qsl: "", //最少起售量
					chd: "", //存货地
					flfs: "", //辅流方式
					qtsm: "", //其他说明
					other_sx: [], //其他属性
					// 商品属性内容结束
					image: [], //商品缩略图
					images: [], //商品主图
					xq_images: [], //商品详情
					specs: "", //规格single=单规格,multi=多规格
					spec: { //单规格时传的价格信息
						market_price: "",
						stock: "",
						price: "",
						difference: ""
					}, //产地
					sku: [], //产地
					spu: [], //产品属性
					spuItem: [], //产品规格
					market_price: [], //原价
					price: [], //现金
					stocks: [], //库存
					yspu: [], //原内容需要发送过去编辑的时候使用
					yspuItem: [],
					ysku: [],
					yzdylist: [], //自定义数组
					lxname: "",
					mobile: "",
					send_province_id: "",
					send_city_id: "",
					send_area_id: "",
				},
				guigedata: {
					yspu: [], //原内容需要发送过去编辑的时候使用
					yspuItem: [],
					ysku: [],
					yzdylist: [], //自定义数组
				},
				// 产品分类弹出层
				show_cp: false,
				list: [],
				rightlist: [],
				category_name: "", //产品分类
				listid: "",
				area: [], //收获地址
				items: citys.data,
				vadio: [],
				categoryIdList: [],
				categoryNameList: [],
				oneCategoryId: "",
			}
		},
		onLoad(options) {
			if (options.id) {
				this.listid = options.id
				uni.setNavigationBarTitle({
					title: "编辑商品"
				})
				this.getdetail()
			}
			this.cpflList()
		},
		computed: {
			shuxingshow() {
				let data = this.dataAll
				if (data.cd || data.zsl || data.cz || data.jg || data.cweigh || data.cs || data.min_qsl || data.chd || data
					.qtsm || data.flfs || data.other_sx.length != 0) {
					return true
				} else {
					return false
				}
			}
		},
		onShow() {
			uni.$off("spsx") //商品属性
			uni.$on("spsx", data => {
				this.dataAll.cd = data.cd
				this.dataAll.zsl = data.zsl
				this.dataAll.cz = data.cz
				this.dataAll.jg = data.jg
				this.dataAll.cweigh = data.cweigh
				this.dataAll.cs = data.cs
				this.dataAll.min_qsl = data.min_qsl
				this.dataAll.chd = data.chd
				this.dataAll.flfs = data.flfs
				this.dataAll.qtsm = data.qtsm
				this.dataAll.other_sx = data.other_sx
			})
			uni.$off("spggsingle") //商品规格单规格
			uni.$on("spggsingle", data => {
				this.dataAll.specs = "single"
				this.dataAll.spec = data
			})
			uni.$off("spggmulti") //商品规格多规格
			uni.$on("spggmulti", data => {

				this.dataAll.specs = "multi"
				this.guigedata.ysku = data.ysku
				this.guigedata.yspuItem = data.yspuItem
				this.guigedata.yzdylist = data.yzdylist
				this.guigedata.yspu = data.yspu
				this.dataAll.ysku = data.ysku
				this.dataAll.yspuItem = data.yspuItem
				this.dataAll.yzdylist = data.yzdylist
				this.dataAll.yspu = data.yspu
				this.dataAll.spu = data.spu
				this.dataAll.sku = data.sku
				this.dataAll.price = data.price
				this.dataAll.market_price = data.market_price
				this.dataAll.stocks = data.stocks
				this.dataAll.spuItem = data.spuItem
			})
		},
		methods: {
			upvideo() {
				let uploadFile = ''
				let _this = this;
				// 1.选择要上传的视频
				uni.chooseVideo({
					maxDuration: 40, // 拍摄视频最长拍摄时间，单位秒。最长支持 60 秒。
					sourceType: ['album'], // album 从相册选视频，camera 使用相机拍摄，默认为：['album', 'camera']
					success: function(res) {
						_this.uploadImageService(res.tempFilePath, _this.vadio)
					}
				});
			},
			bindPickerChange(val) {
				let area = val.detail.value
				this.area = [area[0].text, area[1].text, area[2].text];
				this.dataAll.send_province_id = area[0].value;
				this.dataAll.send_city_id = area[1].value;
				this.dataAll.send_area_id = area[2].value;
				console.log(this.dataAll, "8787")
			},
			getdetail() {
				httpRequest.request('/api/goods/myGoodsDetail', 'GET', {
					id: this.listid
				}, false, false, true).then(res => {
					this.dataAll.title = res.data.goodsinfo.title //商品名称
					this.dataAll.category_id = res.data.categoryinfo.id //商品分类
					this.category_name = res.data.goodsinfo.category_text //商品分类
					// 商品属性内容开始
					this.dataAll.cd = res.data.goodsinfo.cd //产地
					this.dataAll.zsl = res.data.goodsinfo.zsl //自重量（KG）
					this.dataAll.cz = res.data.goodsinfo.cz //材质
					this.dataAll.jg = res.data.goodsinfo.jg //结构
					this.dataAll.cweigh = res.data.goodsinfo.cweigh //称重
					this.dataAll.cs = res.data.goodsinfo.cs //成色
					this.dataAll.min_qsl = res.data.goodsinfo.min_qsl //最少起售量
					this.dataAll.chd = res.data.goodsinfo.chd //存货地
					this.dataAll.flfs = res.data.goodsinfo.flfs //辅流方式
					this.dataAll.qtsm = res.data.goodsinfo.qtsm //其他说明
					if(res.data.goodsinfo.other_sx){
						this.dataAll.other_sx = JSON.parse(res.data.goodsinfo.other_sx) //其他属性
					}
					this.dataAll.lxname = res.data.goodsinfo.lxname
					this.dataAll.mobile = res.data.goodsinfo.mobile
					this.dataAll.send_province_id = res.data.goodsinfo.send_province_id
					this.dataAll.send_city_id = res.data.goodsinfo.send_city_id
					this.dataAll.send_area_id = res.data.goodsinfo.send_area_id
					this.area = res.data.goodsinfo.cityinfo ? res.data.goodsinfo.cityinfo.split("/") : []
					// 商品属性内容结束
					this.dataAll.image = [res.data.goodsinfo.image_text] //商品缩略图
					this.dataAll.images = res.data.goodsinfo.images_text //商品主图
					this.dataAll.xq_images = res.data.goodsinfo.xq_images_text //商品详情
					this.dataAll.specs = res.data.goodsinfo.specs //规格single=单规格,multi=多规格
					this.dataAll.spec.market_price = res.data.specdata.market_price //单规格时传的价格信息
					this.dataAll.spec.stock = res.data.specdata.stock //单规格时传的价格信息
					this.dataAll.spec.price = res.data.specdata.price //单规格时传的价格信息
					this.dataAll.spec.difference = res.data.specdata.difference //单规格时传的价格信息
					this.dataAll.sku = res.data.sku //产地
					this.dataAll.spu = res.data.spu.join() //产品属性
					this.dataAll.spuItem = res.data.spuItem //产品规格
					res.data.skuItem.forEach(item => {
						this.dataAll.market_price.push(item.market_price)
						this.dataAll.price.push(item.price)
						this.dataAll.stocks.push(item.stock)
					})
					this.dataAll.yspu = res.data.yspu //原内容需要发送过去编辑的时候使用
					this.dataAll.yspuItem = res.data.yspuItem
					this.dataAll.ysku = res.data.ysku
					this.dataAll.yzdylist = res.data.yzdylist //自定义数组

					this.guigedata.yspu = res.data.yspu //原内容需要发送过去编辑的时候使用
					this.guigedata.yspuItem = res.data.yspuItem
					this.guigedata.ysku = res.data.ysku
					this.guigedata.yzdylist = res.data.yzdylist //自定义数组
					this.vadio = [res.data.goodsinfo.video_url_text]

				})
			},
			submit() {
				if (this.dataAll.title == "") {
					httpRequest.toast("请输入商品名称")
					return false
				}
				if (this.dataAll.category_id == "") {
					httpRequest.toast("请选择商品分类")
					return false
				}
				// if (this.dataAll.cd == "") {
				// 	httpRequest.toast("请选择商品属性")
				// 	return false
				// }
				if (this.dataAll.specs == "") {
					httpRequest.toast("请选择规格")
					return false
				}
				if (this.dataAll.send_area_id == "") {
					httpRequest.toast("请选择发货地")
					return false
				}
				if (this.dataAll.mobile != "") {
					let mobile = this.dataAll.mobile;
					if (!mobile.match(/^1\d{10}$/)) {
						httpRequest.toast("请输入有效的手机号码");
						return false;
					}
				}
				if (!this.dataAll.image.length) {
					httpRequest.toast("请上传商品缩略图")
					return false
				}
				if (!this.dataAll.images.length) {
					httpRequest.toast("请上传商品主图")
					return false
				}
				if (!this.dataAll.xq_images.length) {
					httpRequest.toast("请上传商品详情图")
					return false
				}
				uni.showLoading({
					title: '请稍候...',
					mask: true
				})
				let obj = JSON.parse(JSON.stringify(this.dataAll))
				obj.image = obj.image.join()
				obj.images = obj.images.join()
				obj.xq_images = obj.xq_images.join()
				this.$set(obj, "video_url", this.vadio.join())
				let url = "/api/goods/addGoods"
				let data = {
					goodsinfo: obj
				}
				if (this.listid) {
					this.$set(data, "id", this.listid)
					url = "/api/goods/editGoods"
				}
				httpRequest.request(url, 'POST', data, false, false, true).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						setTimeout(() => {
							uni.hideLoading()
						}, 600)
						setTimeout(() => {
							uni.navigateBack(1)
						}, 1000)
					} else {
						uni.hideLoading()
					}
				}).catch(err => {
					uni.hideLoading()
					httpRequest.toast(err.msg);
				})
			},
			sure() {
				// this.rightlist.forEach(item => {
				// 	item.childlist.forEach(ite => {
				// 		if (ite.ischeck) {
				// 			this.dataAll.category_id = ite.id
				// 			this.category_name = ite.name
				// 		}
				// 	})
				// })
				this.dataAll.category_id = this.categoryIdList.join(',')
				this.category_name = this.categoryNameList.join(',')
				this.show_cp = false
			},
			changestatus(data) {
				this.list.forEach(item => {
					if (item.id == data.id) {
						item.ischeck = true
						this.rightlist = item.childlist
					} else {
						item.ischeck = false
					}
				})
				this.resetcpfl(1)
			},
			changesmallStatus(data,id) {
				if (!this.oneCategoryId) {
					this.resetcpfl(1)
					this.oneCategoryId = id
					data.ischeck = !data.ischeck
					this.rightlist.forEach(item => {
						item.childlist.forEach(ite => {
							if (ite.ischeck) {
								let index = this.categoryIdList.indexOf(ite.id)
								if (index == -1) {
									this.categoryIdList.push(ite.id)
									this.categoryNameList.push(ite.name)
								}
							} else {
								let index = this.categoryIdList.indexOf(ite.id)
								if (index != -1) {
									this.categoryIdList.splice(index, 1)
									this.categoryNameList.splice(index, 1)
								}
							}
						})
					})
				} else {
					if (this.oneCategoryId == id) {
						data.ischeck = !data.ischeck
						this.rightlist.forEach(item => {
							item.childlist.forEach(ite => {
								if (ite.ischeck) {
									let index = this.categoryIdList.indexOf(ite.id)
									if (index == -1) {
										this.categoryIdList.push(ite.id)
										this.categoryNameList.push(ite.name)
									}
								} else {
									let index = this.categoryIdList.indexOf(ite.id)
									if (index != -1) {
										this.categoryIdList.splice(index, 1)
										this.categoryNameList.splice(index, 1)
										if (!this.categoryIdList.length) {
											this.oneCategoryId = ""
										}
									}
								}
							})
						})
					}else {
						console.log(3,this.oneCategoryId)
						this.resetcpfl(1)
						data.ischeck = !data.ischeck
						this.rightlist.forEach(item => {
							item.childlist.forEach(ite => {
								if (ite.ischeck) {
									let index = this.categoryIdList.indexOf(ite.id)
									if (index == -1) {
										this.categoryIdList.push(ite.id)
										this.categoryNameList.push(ite.name)
									}
								} else {
									let index = this.categoryIdList.indexOf(ite.id)
									if (index != -1) {
										this.categoryIdList.splice(index, 1)
										this.categoryNameList.splice(index, 1)
										if (!this.categoryIdList.length) {
											this.oneCategoryId = ""
										}
									}
								}
							})
						})
					}
				}
				console.log(this.categoryIdList)
				// this.rightlist.forEach(item => {
				// 	item.childlist.forEach(ite => {
				// 		if (ite.id == data.id) {
				// 			this.categoryIdList.push(data.id)
				// 			this.categoryNameList.push(ite.name)
				// 			ite.ischeck = true
				// 		} else {
				// 			let index = this.categoryIdList.indexOf(ite.id)
				// 			if (index != -1) {
				// 				this.categoryIdList.splice(index, 1)
				// 				this.categoryNameList.splice(index, 1)
				// 			}
				// 			ite.ischeck = false
				// 		}
				// 	})
				// })
			},
			resetcpfl(value) {
				this.list.forEach(items => {
					items.childlist.forEach(item => {
						item.childlist.forEach(ite => {
							ite.ischeck = false
						})
					})
				})
				this.category_id = ""
				this.oneCategoryId = ""
				this.categoryIdList = []
			},
			cpflList() {
				httpRequest.request('/api/goods/categoryList', 'GET', {
					hot_status: 0,
					category_type: 1
				}, false, false, true).then(res => {
					if (res.code == 1) {
						res.data.forEach(item => {
							this.$set(item, "ischeck", false)
							item.childlist.forEach(ite => {
								ite.childlist.forEach(it => {
									this.$set(it, "ischeck", false)
								})
							})
						})
						res.data[0].ischeck = true
						this.list = res.data
						this.rightlist = res.data[0].childlist
						console.log(this.rightlist)
					}
				})
			},
			delimg(index, value) {
				value.splice(index, 1)
			},
			uploadImg(key, upImgs) {
				let _this = this;
				let num = Number(key) - upImgs.length;
				if (num <= 0) {
					return false;
				}
				uni.showActionSheet({
					itemList: ['相机', '相册'],
					success: function(res) {
						// 选择相机走0
						if (res.tapIndex == 0) {
							httpRequest.chooseImage(num, ['camera']).then(res => {
								for (let i = 0; i < res.length; i++) {

									_this.uploadImageService(res[i], upImgs)
								}
							}).catch(err => {});
						}
						// 选择相册走1
						if (res.tapIndex == 1) {
							httpRequest.chooseImage(num, ['album']).then(res => {
								for (let i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i], upImgs)
								}
							}).catch(err => {});
						}
					},
					fail: function(res) {}
				});
			},
			uploadImageService(url, upImg) {
				let _this = this;
				httpRequest.uploadFile('/api/common/upload', url).then(res => {
					let image_item = res.fullurl;
					upImg.push(image_item);
				}).catch(err => {});
			},
			shuxing() {
				let data = {
					cd: this.dataAll.cd,
					zsl: this.dataAll.zsl,
					cz: this.dataAll.cz,
					jg: this.dataAll.jg,
					cweigh: this.dataAll.cweigh,
					cs: this.dataAll.cs,
					min_qsl: this.dataAll.min_qsl,
					chd: this.dataAll.chd,
					flfs: this.dataAll.flfs,
					qtsm: this.dataAll.qtsm,
					other_sx: this.dataAll.other_sx
				}
				uni.navigateTo({
					url: '/pages/mypage/shangpinsx?msg=' + encodeURIComponent(JSON.stringify(data))
				})
			},
			xuanze() {
				let data = {
					lable: this.dataAll.specs == "single" ? 1 : this.dataAll.specs == "multi" ? 2 : 1,
					market_price: this.dataAll.spec.market_price,
					stock: this.dataAll.spec.stock,
					price: this.dataAll.spec.price,
					yspu: this.guigedata.yspu,
					yspuItem: this.guigedata.yspuItem,
					ysku: this.guigedata.ysku,
					yzdylist: this.guigedata.yzdylist,
					difference: this.dataAll.spec.difference
				}
				uni.navigateTo({
					url: '/pages/mypage/shangpingg?msg=' + encodeURIComponent(JSON.stringify(data))
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.option {
		color: #228DFF;
	}

	.form {
		text-align: center;
		padding-top: 54rpx;
		padding-bottom: 61rpx;
	}

	.pu {
		background: RGBA(247, 249, 250, 1);
		border-radius: 41rpx 41rpx 41rpx 41rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		padding: 20rpx 71rpx 21rpx 71rpx;
		margin: 0rpx 25rpx 30rpx 25rpx;
	}

	.footer {
		padding: 84rpx 30rpx;
	}

	.nav {
		padding: 30rpx 10rpx;
	}

	.upbox {
		width: 180rpx;
		height: 180rpx;
		font-size: 20rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
		background-color: RGBA(233, 244, 255, 1);
	}

	.lan {
		background: RGBA(233, 244, 255, 1);
		border-radius: 41rpx 41rpx 41rpx 41rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #228DFF;
		padding: 20rpx 71rpx 21rpx 71rpx;
		margin: 0rpx 25rpx 30rpx 25rpx;
	}

	.itemlable {
		padding: 15rpx 35rpx;
		border-radius: 10rpx;
	}

	.mainbgc {
		overflow: hidden;
	}

	.focusbgc {
		background-color: rgba(34, 141, 255, .1);
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #228DFF;
	}

	.nofocusbgc {
		background-color: #EFEFEF;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.item_image_box {
		width: 33.33%;
	}

	.item_image {
		position: relative;
		width: 180rpx;
		height: 180rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.video {
		width: 180rpx;
		height: 180rpx;
	}

	// 分类列表滚动
	.leftscroll {
		height: 500rpx;
		width: 200rpx;
	}

	.itemfocus {
		background-color: #fafafa;
		padding: 25rpx 0 25rpx 20rpx;
	}

	.lablefocus {
		font-size: 30rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #228DFF;
		text-align: center;
		border-left: 2rpx solid #228DFF;
		// width: 100rpx;
		padding-left: 8rpx;
		// overflow: hidden;
		// text-overflow: ellipsis;
		// white-space: nowrap;
	}

	.itemnofocus {
		background-color: #fff;
		padding: 25rpx 0 25rpx 20rpx;
	}

	.lablenofocus {
		font-size: 30rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #666666;
		text-align: center;
		padding-left: 10rpx;
		// width: 100rpx;
		// overflow: hidden;
		// text-overflow: ellipsis;
		// white-space: nowrap;
	}

	.rightscroll {
		width: calc(100vw - 200rpx);
		background-color: #fafafa;
		height: 500rpx;
		box-sizing: border-box;
	}

	// 分类列表滚动结束
</style>